import React, { Component } from 'react';
import {
    StyleSheet, TouchableHighlight,
    Text,
    View, Button, Image, WebView
} from 'react-native';
import { connect } from 'react-redux';
import HeaderBar from '../../common/headerBar';
import { Variable } from '../../variables';
import DeviceRn from '../../components/Tools/device';

let DevWH = DeviceRn().getWidHig();
let WEBVIEW_REF = "webview";
// let DEFAULT_URL = "http://m.sporttery.cn/wap/digital/lottery_number.php?type=1&issue=18005"

class GonggaoScreen extends Component {
    static navigationOptions = ({ navigation, screenProps }) => (
        {
            header: null,
        });

    constructor(props) {
        super(props);
        this.state = {
            // url: DEFAULT_URL,
            status: 'No Page Loaded',
            backButtonEnabled: false,
            forwardButtonEnabled: false,
            loading: true,
            scalesPageToFit: true,
        };
    }

    _backClick() {
        let { goBack } = this.props.navigation;
        goBack();
    }

    componentWillReceiveProps(nextProps) {
        this.netInfo = nextProps.status;
    }

    onNavigationStateChange(e) {
        // console.log(e);
    }

    render() {
        const {params} = this.props.navigation.state
        return (
            <View style={styles.home}>
                <WebView
                    ref={WEBVIEW_REF}
                    automaticallyAdjustContentInsets={false}
                    style={styles.webView}
                    source={{ uri: params.url }}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    decelerationRate="normal"
                    onNavigationStateChange={this.onNavigationStateChange}
                    startInLoadingState={true}
                    scalesPageToFit={this.state.scalesPageToFit}
                />
                <View style={styles.header}>
                    <TouchableHighlight style={Variable.leftT} underlayColor={'#f84a4a'} activeOpacity={0.85} onPress={() => this._backClick()}>
                        <Image style={[Variable.backIcon, { tintColor: '#fff' }]} source={require('../../assets/images/back.png')} />
                    </TouchableHighlight>
                    <Text style={{ fontSize: 18, color: '#fff' }}>开奖公告</Text>
                </View>
            </View>
        );
    }
}
mapStoreState = (store) => ({
    status: store.netInfo.status,
});
export default connect(mapStoreState)(GonggaoScreen);

const styles = StyleSheet.create({
    home: {
        flex: 1,
        //justifyContent: 'center',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
        marginVertical: 0,
    },
    header: {
        flex: 1, position: 'absolute', width: DevWH.sW, height: 44,
        justifyContent: 'center', alignItems: 'center', flexDirection: 'row',
        backgroundColor: '#f84a4a', borderBottomColor: '#eee', borderBottomWidth: 1
    },
    webView: {
        flex: 1,
        width: DevWH.sW,
    },
});